<?php
$version = "0.3.1";
include("header.php");?>
<?php $flags = mysql_query("SELECT cityname, flaglocation, citynicename, color FROM AV_CITIES"); ?>
<?php $cities = mysql_query("SELECT cityname, flaglocation, fullcityname, color FROM AV_CITIES"); ?>

<nav class="city-menu">
    <ul class="cities">
        <?php while( $row = mysql_fetch_array($cities) ): ?>

        <li class="city" id="<?php echo $row["cityname"]; ?>">
            <img class="rounded" src="<?php echo $row["flaglocation"]; ?>">
            <span class="city-name"><?php echo $row["fullcityname"]; ?></span>
        </li>

        <?php endwhile; ?>
    </ul>
</nav>

<div class="side-categories">
    <div class="menu">
        <div class="menu-button icon-list-bullet"></div>
    </div>
    <ul class="categories">
        <?php //categories will be appended with javascript ?>
    </ul>
    <div class="selected-city">
        <ul class="city-flags">
            <?php while( $row = mysql_fetch_array($flags) ): ?>

            <li class="city-flag" id="<?php echo $row["cityname"]; ?>" data-color="<?php echo $row["color"]; ?>">
                <img src="<?php echo $row["flaglocation"]; ?>" title="<?php echo $row["citynicename"]; ?>">
            </li>

            <?php endwhile; ?>
        </ul>
    </div>
</div>
<div class="main-wrapper">
    <div class="display-options">
        <ul class="display-options-ul">
            <span>Display options</span>
            <li id="single-view" class="icon-minus active" title="Single view"></li>
            <li id="double-view" class="icon-pause" title="Side by side view"></li>
            <li id="quad-view" class="icon-th-large" title="Quad view"></li>
            <li id="layout-fullscreen-button" class="icon-resize-full"></li>
        </ul>
    </div>
    <div id="graph-1-1" class="graphs single-view graph-1-1">
        <div class="graph-info">
            <span id="chosen-category-icon"></span>
            <span class="category-city"></span>
            <span class="more-info-graph-btn icon-info-circled"></span>
            <span class="close-graph-btn icon-cancel-circled"></span>
            <div class="graph-info-blank"></div>
        </div>
        <div class="graph-drawzone" id="graph-drawzone-1-1"></div>
        <div class="graph-dropzone">
            <div class="dropzone-overlay"></div>
            <div class="dropzone-content">
                <div class="dropzone-icon icon-down-circled"></div>
                <div class="dropzone-text">Drag and drop a category to this area to begin</div>
            </div>
        </div>
    </div>
</div>

<?php include("footer.php"); ?>